<template>
  <div>
    <h2>我是子组件</h2>
    <p>感谢爸爸给的钱{{ money}}</p>
    <button @click="changeMoney">花钱</button>
    <p>{{car}}</p>
    <button @click="changeCar">换车</button>
  </div>
</template>

<script>
export default {
  props: {
    money: {
      type: Number,
      default: 0
    },
    car: {
      type: String,
      default: '小黄车'
    }
  },
  setup(props, context) {
    // 儿子花钱
    const changeMoney = () => {
      // setup里有this么?
      // vue2   this.$emit('changeMoney', props.money)  (this.props名) props
      context.emit('changeMoney', props.money - 1)
      console.log('想花钱')
    }

    // 儿子想换车
    const changeCar = () => {
      // this.$emit('update:props名字', 值)
      // update: 是一个固定语法 后面跟props名称
      context.emit('update:car', '拖拉机')
    }

    return {
      changeMoney,
      changeCar
    }
  }
}
</script>

<style>

</style>
